<template>
  <div class="department-container">
    <div class="app-container">
      <div class="company">
        <div class="c-left">{{ campanyIofo.name }}</div>
        <div class="c-right">
          <div class="cr-left">负责人</div>
          <!-- 碰到一个复杂的页面结构，第一反应，一定是去找其他人写的组件，要么是element-ui，要么去百度 搜 vue 下拉插件 -->
          <div class="cr-right">
            <!-- 下面代码复制过来 -->
            <el-dropdown>
              <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addDepartments('')">添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="tree">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
          <!-- 下面这个结构，就是我们通过自定义的html 通过插槽传递给el-tree组件，让他替换el-tree里面默认的结构 -->
          <!-- <div slot-scope="{node, data}" class="company"> -->
          <!-- 作用域插槽的 aaa 是组件 el-tree 给我往外暴露的一个 属性， 是一个对象，里面有node属性和data属性 -->
          <div slot-scope="{data:mydata}" class="company">
            <div class="c-left" @click="testScope(mydata)">{{ mydata.name }}</div>
            <div class="c-right">
              <div class="cr-left">{{ mydata.manager }}</div>
              <!-- 碰到一个复杂的页面结构，第一反应，一定是去找其他人写的组件，要么是element-ui，要么去百度 搜 vue 下拉插件 -->
              <div class="cr-right">
                <!-- 下面代码复制过来 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addDepartments(mydata)">添加子部门</el-dropdown-item>
                    <el-dropdown-item @click.native="editDepartments(mydata)">编辑部门</el-dropdown-item>
                    <el-dropdown-item v-if="mydata.children && mydata.children.length === 0 " @click.native="delDepartments(mydata)">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-tree>
      </div>
      <!-- 单独的提示框 -->
      <el-dialog
        v-if="dialogVisible"
        title="新增子部门"
        :visible.sync="dialogVisible"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <updateDialog ref="dialogRef" :arr-list-to-child="arrListToChild" :is-edit="isEdit" :current-pid="currentPid" @MyCloseEvent="dialogVisible=false" @success="updateSuccess" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartmentInfoRequest, delDepartmentByIdRequest } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import UpdateDialog from './updateDialog'

export default {
  components: {
    UpdateDialog
  },
  data() {
    return {
      data: [],
      campanyIofo: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false, // 控制提示框的开关,
      currentPid: '',
      isEdit: false,
      // 获取父组件里面所有的平铺数据，传递给子组件使用
      arrListToChild: []
    }
  },

  created() {
    this.getDepartmentInfo()
  },
  methods: {
    async getDepartmentInfo() {
      try {
        const res = await getDepartmentInfoRequest()
        this.campanyIofo = res.data.depts.shift()
        this.data = tranListToTreeData(res.data.depts, '')
        this.arrListToChild = res.data.depts.map(item => {
          return {
            id: item.id,
            pid: item.pid,
            name: item.name,
            code: item.code
          }
        })
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    handleNodeClick(data) {
      // console.log(data)
    },
    testScope(a, b) {
      // console.log(a)
      // console.log(b)
    },
    // 部门新增
    addDepartments(param) {
      this.isEdit = false
      if (param) {
        this.currentPid = param.id
      } else {
        this.currentPid = ''
      }
      this.dialogVisible = true
    },
    updateSuccess() {
      // 创建成功以后，关闭弹窗，是由子组件触发的这个函数
      this.dialogVisible = false
      // 回到了父组件以后， 当前页面的数据还是旧的，不需要手动去刷新页面
      // 页面上的树形结构数据，是发请求获取的，我们只需在发一遍请求即可
      // SPA 单页面应用程序
      this.getDepartmentInfo()
      // 不需要 window.location.reload()  体验不好，页面会闪一下
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 点击编辑部门
    editDepartments(param) {
      this.isEdit = true
      this.currentPid = param.id
      this.dialogVisible = true
    },
    // 点击删除部门
    delDepartments(params) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.delpartmentById(params.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 封装异步删除请求
    async delpartmentById(id) {
      await delDepartmentByIdRequest(id)
      // 重新获得页面
      this.getDepartmentInfo()
    }
  }
}
</script>

<style lang="scss">
/* // 写样式的时候，代码不要写散了，要用一个大类，包裹着里面所有的类
// 方便以后 代码进行谦虚 */
.app-container {
  .company {
    // 容器
    display: flex;
    width: 100%;
    .c-left {
      // 项目
      flex: 1 1 80%;
      padding: 5px 10px;
      // background-color: lightblue
    }
    .c-right {
      // 项目
      flex: 1 1 20%;
      padding: 5px 10px;
      // background-color: lightblue;
      // 把这个div项目， 又当做一个容器
      display: flex;
      .cr-left {
        flex: 1 1 50%;
        // background-color: lightsalmon
      }
      .cr-right {
        flex: 1 1 50%;
        // background-color: lightgreen
      }
    }
  }
}
</style>
